<template>
  <el-dialog :visible.sync="show" :fullscreen="true" id="reportweapper">
    <p class="reporttitle">实验报告</p>
    <div class="center_x">
      <el-card style="width:1000px">
        <div class="container">
          <div style="margin-left:5%">
            <img
              class="reportimg"
              height="150px"
              :src="require('../../assets/r_icon.png')"
            />
          </div>
          <table class="f_20">
            <tr>
              <td colspan="1" class="s_td">学校/单位名：</td>
              <td colspan="1" class="s_td">{{ head.school }}</td>
            </tr>
            <tr>
              <td colspan="1" class="s_td">实验课程名称：</td>
              <td colspan="1" class="s_td">{{ head.courseName }}</td>
            </tr>
            <tr>
              <td class="s_td">姓名：</td>
              <td class="s_td">{{ head.username }}</td>
              <td class="s_td">组织形式：</td>
              <td class="s_td">{{ head.organization }}</td>
            </tr>
            <tr>
              <td class="s_td">指导教师：</td>
              <td class="s_td">{{ head.teacherName }}</td>
              <td class="s_td">日期：</td>
              <td class="s_td">{{ $parseDate(head.date) }}</td>
            </tr>
            <tr>
              <td colspan="2" class="s_td">
                实验得分(报告提交后自动判定)：{{ scoresum.score }}
              </td>
            </tr>
          </table>
        </div>
        <el-divider></el-divider>
        <div class="fyc">
          <div style="width:80%">
            <div class="allscore">
              <div class="name">{{ scoresum.name }}</div>
              <div class="score">{{ scoresum.score }}</div>
            </div>
            <el-table :data="s">
              <el-table-column label="项目名" prop="name"></el-table-column>
              <el-table-column
                label="得分"
                prop="score"
                align="right"
              ></el-table-column>
            </el-table>
          </div>
        </div>

        <div class="fyc">
          <div style="width:80%">
            <p class="result">实验结论</p>
            <br />
            <div class="conclusion">
              <p>{{ conclusion }}</p>
            </div>
          </div>
        </div>
        <div class="downloadbox" style="width:80%">
          <el-button
            class="download"
            type="danger"
            icon="el-icon-download"
            @click="download"
            >附件下载</el-button
          >
        </div>
      </el-card>
    </div>
  </el-dialog>
</template>
<script>
// import ReportCard from '../card/ReportCard.vue'
import RApi from '../../api/ExpRecord.js'
import rApi from '../../api/Report.js'
export default {
  props: {
    id: Number,
    visible: Boolean
  },
  data() {
    return {
      s: [],
      scoresum: { name: '总分', score: 0 },
      str: '',
      head: {
        id: 1,
        school: '',
        courseName: '',
        username: '',
        teacherName: '',
        organization: 0,
        date: 0,
        conclusion: ''
      },
      conclusion: '',
      show: false,
      version: 0,
      fullSource: [],
      downloadlist: []
    }
  },
  components: {
    // ReportCard
  },
  watch: {
    visible: function(val) {
      this.show = val
    },
    show: function(val) {
      this.$emit('update:visible', val)
    },
    id: function() {
      this.loadSource()
    }
  },
  methods: {
    loadSource() {
      this.axios
        .get(rApi.header, { params: { experimentId: this.id } })
        .then(res => {
          if (res.data.status === 0) {
            this.head = res.data.data
          }
        })
      this.axios
        .get(RApi.findScoreById, { params: { experimentId: this.id } })
        .then(res => {
          if (res.data.status === 0) {
            let array = [
              { name: '实验时长', score: null },
              { name: '知识考核模块得分', score: null },
              { name: '开始实验模块得分', score: null },
              { name: '模拟提问模块得分', score: null }
            ]
            let allscore = { name: '总分:', score: null }
            if (res.data.data) {
              let obj = res.data.data
              // window.console.log(obj);
              var header = [
                'knowledgeScore',
                'startScore',
                'simulationScore',
                'ownScore'
              ]
              for (let i in header) {
                array[i].score = obj[header[i]]
              }
              allscore.score = obj['totalScore']
              this.conclusion = obj['conclusion']
            }
            this.s = array
            this.scoresum = allscore
            window.console.log(this.s, '实验得分')
          }
        })
      this.axios
        .get(RApi.findFileId, { params: { experimentId: this.id } }) //根据ID寻找实验对应音频文件
        .then(res => {
          if (res.data.status === 0) {
            // this.downloadlist = res.data.msg.split(',')
            this.str = res.data.msg
            window.console.log(this.str.length)
          }
        })
    },
    init() {
      //这里用请求替代。
      this.loadSource()
    },
    mounted() {
      this.init()
      this.test = this.parseRecord3(this.fullSource)
    },
    download() {
      //下载附件
      window.console.log(this.str)
      window.open(
        'http://192.168.0.127:7000/zsd/user/download2?str=' + this.str
      )
    }
  }
}
</script>
<style>
.container {
  width: 900px;
  margin: 0 auto;
  display: flex;
  margin-top: 20px;
}
.reportimg {
  margin-right: 20px;
}
.f_20 {
  height: 150px;
}
.s_td {
  color: black;
  font-size: 16px;
}
.conclusion {
  border-color: #bfbfbf;
  border-style: groove;
  border-width: 1px;
}
.reporttitle {
  font-size: 30px;
  text-align: center;
  padding-bottom: 20px;
}
#reportweapper .el-dialog__headerbtn {
  font-size: 55px !important;
}
.allscore {
  display: flex;
}
.name {
  font-size: 18px;
  font-weight: bold;
}
.score {
  font-size: 18px;
  font-weight: bold;
}
.el-table .cell {
  padding-left: 0;
}
.result {
  padding-left: 0;
  padding-top: 20px;
  font-size: 18px;
  font-weight: bold;
  text-indent: 0;
}
.conclusion {
  min-height: 50px;
  padding: 10px;
  font-size: 16px;
}
.downloadbox {
  margin: 0 auto;
}
.download {
  height: 40px;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  margin-top: 20px;
  cursor: pointer;
}
</style>
